<template>
  <ModalFormTemplate
    :open="open"
    :formConfig="formConfig"
    :title="title"
    :width="width"
    @cancel="onCancel"
    @finish="onFinish"
    ref="modalRef"
  />
</template>
<script setup lang="ts">
  import { computed, ref, useTemplateRef, watch } from 'vue';
  import ModalFormTemplate, { type ModalFormItemConfig } from '@/components/template/form/modal-form-template.vue';

  const title = '管理员修改'; //弹窗标题
  const width = 550; //弹窗宽度
  const modalInstance = useTemplateRef('modalRef'); //通用模态弹窗组件引用，用与调用模态弹窗组件内部方法
  const open = ref(false); //控制弹窗显示、隐藏
  const emits = defineEmits<{ dataReload: [] }>(); //通知调用组件(父组件) 执行 父组件 的 @dataReload 的方法
  const editId = ref(0); //要修改的记录ID

  defineExpose({ show }); //暴露接口 show(显示弹窗) 方法，供 父组件 调用

  /* [关闭弹窗] 1. 重置表单 2. 关闭弹窗 */
  function onCancel() {
    modalInstance.value?.resetForm();
    open.value = false;
  }

  /* [显示弹窗] 1. 显示弹窗  */
  function show(id: number) {
    editId.value = id;
    open.value = true;
  }

  /* [监听弹窗显示] open = true 时，调用 getDataInfo 获取数据 */
  watch(open, (val) => {
    if (val === true) {
      getDataInfo();
    }
  });

  /* [获取修改数据] 调用子组件 getDataInfo 方法详情 */
  function getDataInfo() {
    modalInstance.value?.getDataInfo(getAction, getParams.value);
  }
  const getAction = 'base.manage.module.ServiceImpl.get'; //get接口 方法名
  const getParams = computed(() => ({ id: editId.value })); //get接口 参数

  /* [提交弹窗] 1. 调用子组件 提交方法 2. 提交成功后，关闭弹窗 3. 刷新父组件数据 */
  async function onFinish() {
    const params = modalInstance.value?.getFormParams();
    const mergedParams = { ...getParams.value, ...params }; //合并提交参数
    try {
      const ret = await modalInstance.value?.postFormData(updateAction, mergedParams);
      if (ret === true) {
        onCancel();
        emits('dataReload');
      }
    } catch (error) {}
  }
  const updateAction = 'base.manage.user.ServiceImpl.update'; //update接口 方法名

  /* [表单配置] */
  const formConfig = computed<ModalFormItemConfig[]>(() => [
    {
      title: '模块名称',
      dataIndex: 'module_name',
      type: 'input',
      maxlength: 20,
      required: true,
      defaultValue: '',
    },
    {
      title: '路由地址',
      dataIndex: 'module_link',
      type: 'input',
      maxlength: 20,
    },
    {
      title: '接口方法',
      dataIndex: 'module_method_name',
      type: 'input',
      maxlength: 20,
    },
    {
      title: '菜单图标',
      dataIndex: 'module_icon',
      type: 'icon-select',
      defaultValue: 'MenuOutlined',
    },
    {
      title: '禁用状态',
      dataIndex: 'module_state',
      type: 'switch',
      props: {
        checkedChildren: '启用',
        checkedValue: 1,
        unCheckedChildren: '禁用',
        unCheckedValue: 2,
      },
      defaultValue: 1,
    },
    {
      title: '排序',
      dataIndex: 'module_sort',
      type: 'input-number',
      props: { max: 9999 },
      defaultValue: 10,
    },
  ]);
</script>
<style lang="less" scoped></style>
